<template>
  <div class="CourseInfo-container">
    <div class="CourseInfo-LeftNav">
      <div class="CourseInfo-LeftNav-TopBar">
        <a-button type="default" @click="router.push('/dashboard')">
          <LeftOutlined style="position: absolute; right: 12px; top: 12px"
        /></a-button>
        <img
          style="position: absolute; left:56px; top: 15px"
          src="../../assets/CourseManageView/inform.svg"
          alt="SVG Image"
        />
        <p>数据科学导论</p>
      </div>
      <div class="CourseInfo-LeftNav-Management">
        <div class="CourseInfo-LeftNav-Management-Title">课程管理</div>
        <div class="CourseInfo-LeftNav-Management-Nav">
          <a-menu
            v-model:selectedKeys="current"
            mode="vertical"
            :items="items"
          />
        </div>
      </div>
    </div>
    <div class="CourseInfo-Content">
      <div class="CourseInfo-Content-Input">
        <a-form
          @submit.prevent="confirm_update"
          :model="formState"
          name="basic"
          autocomplete="off"
        >
          <div class="CourseInfo-Content-Confirm">
            <a-form-item>
              <a-button type="primary" html-type="submit">确认修改</a-button>
            </a-form-item>
          </div>
          <a-form-item
            name="CourseName"
            :rules="[{ required: true, message: 'coursename' }]"
          >
            <div class="CourseInfo-Content-Input-Col">
              <div class="CourseInfo-Content-Input-Col-Title">课程名称*</div>
              <a-textarea
                v-model:value="formState.CourseName"
                placeholder="数据科学导论"
                :autoSize="{ minRows: 1, maxRows: 1 }"
              />
            </div>
          </a-form-item>
          <a-form-item
            name="Category"
            :rules="[{ required: true, message: 'category' }]"
          >
            <div class="CourseInfo-Content-Input-Col">
              <div class="CourseInfo-Content-Input-Col-Title">课程性质*</div>
              <a-textarea
                v-model:value="formState.Category"
                placeholder="专业课程"
                :autoSize="{ minRows: 1, maxRows: 1 }"
              />
            </div>
          </a-form-item>

          <a-form-item
            name="Profile"
            :rules="[{ required: true, message: 'profile' }]"
          >
            <div class="CourseInfo-Content-Input-Col">
              <div class="CourseInfo-Content-Input-Col-Title">课程简介</div>
              <a-textarea
                v-model:value="formState.Profile"
                placeholder="本课程为数据科学的入门性、导论类课程，主要探讨大数据时代及其背后的科学问题——数据科学的理念、理论、方法、技术、工具、应用及数据产品开发，为进一步学习数据科学理论打下较好基础。本课程分为两大专题，分别为：专题一、数据科学的基础理论；专题二、数据产品开发。本课课程对学生专业背景和知识基础不做严格限制，鼓励跨学科选修。"
                :autoSize="{ minRows: 10 }"
              />
            </div>
          </a-form-item>
        </a-form>
      </div>
      <div class="CourseInfo-Content-Delete">
        <a-button type="primary" danger ghost>删除课程</a-button>
      </div>
    </div>
    <div class="Agent-Wrap">
      <AgentChatFrame />
    </div>
  </div>
</template>
<script setup>
import AgentChatFrame from "../../components/AgentChatFrame.vue";

import { LeftOutlined } from "@ant-design/icons-vue";
import { h, ref, reactive, onMounted } from "vue";
import axios from "axios";
import { message } from "ant-design-vue";
import api from '../../api/index';

import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const courseNumber = route.params.course_number;

const current = ref(["CourseInfo"]);
const items = ref([
  {
    key: "CourseInfo",
    label: h("a", { href: `/course/${courseNumber}/info`, target: "_self" }, "课程信息"),
    title: "CourseInfo",
  },
  {
    key: "Students",
    label: h("a", { href: `/course/${courseNumber}/students`, target: "_self" }, "人员管理"),
    title: "Students",
  },
  {
    key: "knowledge",
    label: h("a", { href: `/course/${courseNumber}/knowledge`, target: "_self" }, "知识库管理"),
    title: "knowledge",
  },
  {
    key: "Agent",
    label: h("a", { href: `/course/${courseNumber}/agent`, target: "_self" }, "智能体设置"),
    title: "Agent",
  },
]);

const formState = reactive({
  CourseName: "",
  Category: "",
  Profile: "",
});

const fetchCourseInfo = async () => {
  try {
    const response = await api.getCourseInfo(courseNumber);
    console.log(response.data);
    formState.CourseName = response.data.course_name;
    formState.Category = response.data.course_class;
    formState.Profile = response.data.course_description;
  } catch (error) {
    console.error("获取课程信息失败", error);
    message.error("获取课程信息失败");
  }
};

onMounted(() => {
  fetchCourseInfo();
});

const confirm_update = async () => {
  try {
    // 使用Axios发送POST请求
    const response = await axios.post("/CourseSetting/info", {
      CourseName: formState.CourseName,
      Category: formState.Category,
      Profile: formState.Profile,
    });
    // 提交成功,处理响应数据
    console.log("修改成功", response.data);
    // 可以在这里进行页面跳转或其他操作
    message.success("修改成功!");
    // 例如: router.push('/dashboard');
  } catch (error) {
    console.error("修改失败", error);
    // 显示错误信息给用户
    message.error("修改失败");
  }
};
</script>

<style lang="scss" scoped>
.CourseInfo-container {
  min-width: 1366px;
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #f6f8f7;
}

.CourseInfo-LeftNav {
  box-sizing: border-box;
  width: 236px;
  height: 100%;
  flex-shrink: 0;
  display: inline-block;
  margin-left: 12px;
  padding-top: 20px;
  justify-content: center;
}
.CourseInfo-LeftNav-TopBar {
  width: 236px;
  height: 40px;

  align-content: center;
  position: relative;
}
.CourseInfo-LeftNav-TopBar .ant-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-shadow: 0px 2px 2px 0px rgba(9, 9, 9, 0.06);

  display: inline-block;
  position: absolute;
  left: 0;
  top: 4px;
}
.CourseInfo-LeftNav-TopBar p {
  overflow: hidden;
  color: var(--45, #8c8c8c);
  text-overflow: ellipsis;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;


  display: inline-block;
  position: absolute;
  left:84px;
  top: 12px;  
}
.CourseInfo-LeftNav-Management {
  width: 230px;
  /*height: 900px; */
  height: auto;
  margin-top: 28px;
}
.CourseInfo-LeftNav-Management-Title {
  overflow: hidden;
  color: var(--45, #8c8c8c);
  text-overflow: ellipsis;
  font-family: "PingFang SC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.CourseInfo-LeftNav-Management-Nav {
  width: 220px;
  height: 500px;
  margin-top: 4px;

  .ant-menu {
    background: #F6F8F7;
    border:0 !important;
  }
  :deep(.ant-menu-light .ant-menu-item-selected) {   
    border-radius: 12px;
    border: 1px solid #D9D9D9;
    background-color: #FFF !important;
    box-shadow: 0px 2px 2px 0px #F2F2F2, 0px 2px 2px 0px #F2F2F2;
  }
}

.CourseInfo-Content {
  display: flex;
  flex: 1;
  flex-direction: column;
  /*width: 100%;*/
  height: calc(100% - 40px);
  margin-top: 20px;
  margin-bottom: 20px;

  border-radius: 12px; /*边框圆角*/
  border: 1px solid #ededed;
  background: #fff;
  box-shadow: 0px 2px 2px 0px #f2f2f2;

  position: relative;

  .ant-form {
    padding: 0 16px;
    flex: 1;
    overflow: auto; /*表单这里加上滚动，那么就算表单超出可视范围，也能保证 下面的按钮一直固定在那。不加也行，*/
  }
  .CourseInfo-Content-Delete {
    text-align: right;
    margin: 20px;

    .ant-btn {
      width: 96px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid #F5222D;
      background: #FFF;
      box-shadow: 0px 2px 2px 0px rgba(9, 9, 9, 0.06);
    }
  }
}

.CourseInfo-Content-Confirm {
  margin-top: 16px;
  /*margin-left: 16px;*/
}
.CourseInfo-Content-Confirm .ant-btn {
  border-radius: 12px;
  background: #262626;
  width: 96px;
  height: 40px;
  &:hover {
    background-color: #484848; /* 悬浮时的背景颜色 */
    border-color: #484848;    /* 悬浮时的边框颜色 */
    box-shadow: 0 0 0 1px #262626; /* 悬浮时的边框阴影 */
  }
}


.CourseInfo-Content-Input {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  //margin-top: 16px;
}
.CourseInfo-Content-Input-Col {
  width: 504px;
  margin-top: 20px;

  font-size: 0;
}
.CourseInfo-Content-Input-Col-Title {
  overflow: hidden;
  color: #262626;
  text-align: justify;
  text-overflow: ellipsis;
  font-family: "PingFang SC";
  font-size: 14px;
  font-style: normal;
  font-weight: 550;
  line-height: normal;

  width: 64px;
  height: 20px;
  vertical-align: top;
  display: inline-block;
  margin-left: 0;
}
.CourseInfo-Content-Input-Col .ant-input {
  width: 416px;
  vertical-align: top;
  display: inline-block;
  margin-left: 24px;

  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.CourseInfo-Content-Input-Col .ant-input::placeholder {
  color: #262626;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.Agent-Wrap {
  flex: 1;
  min-width: 500px;
  margin-right: 20px;
  flex-shrink: 0;
}
</style>